<template>
    <div class="not-found-box">
        <img src="@/assets/imgs/404.svg" alt="" srcset="" />
        <div class="tip">
            <h1>404</h1>
            <h2>Ooops……！你迷路了。</h2>
            <p>您要查找的页面不存在。你怎么来的是一个谜。但是你可以点击下面的按钮回到主页。</p>
			<router-link to="/home" class="btn" tag="button">首页</router-link>
        </div>
    </div>
</template>
<style lang="less" scoped>
.not-found-box {
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	background-color: @bg-color;
	img{
		width: 20%;
	}
	.tip{
		width: 20%;
		color: @font-b;
		font-size: 20px;
	}
	.btn{
		background-color: transparent;
		outline: none;
		border: 1px solid @font-b;
		font-size: 20px;
		padding: 6px 12px;
		color: @font-b;
	}
	.btn:active{
		background-color: #999;
	}
}
</style>